<template>
  <ZZDialog class='settings' title='视图视角' @close="callbackclose()">
    <div class="mt-4">
      <el-input v-model="bookmark_name" style="background-color: black !important;" placeholder="输入视角名字">
        <template #append>
          <el-button type="primary" @click="addbookmark"> 添加</el-button>
        </template>
      </el-input>
    </div>

    <el-table :data="tableData" row-key="name" style="width: 100%;height: 660px;" highlight-current-row
     @row-dblclick="handleCurrentChange">
      <el-table-column prop="id" label="id" v-if="false" />
      <el-table-column fixed prop="name" label="名称" sortable>
        <template #default="scope">
          <el-image style="width: 190px; height: 100px" :src="scope.row.icon" />
          <br />
          <span class="demonstration">{{ scope.row.name }}</span>
          <el-button link type="primary" size="small" @click="delClick(scope.row.id)"><i class="fa fa-trash"
              title="删除"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
  </ZZDialog>
</template>

<script>

import ZZDialog from '../../../common/ZZDialog.vue' 
import { LocalStorageUser } from '../../../utils/localStorage'
import { MessageBox, Message,Loading } from 'element-ui';

export default {
  components: {
    ZZDialog
  },
  data(){
    return{
      viewer: undefined,
      cookieName: 'zzgis_bookmark',
      bookmark_name: '',
      tableData: [{ name: "", id: 1, data: "", icon: "" }]
    }
  },
  beforeMount(){
    this.viewer = this.$store.state.viewer
  },
  mounted() {
    this.getbookmark();
  },
  methods: {
    // 处理添加视角的逻辑
    addbookmark() {
      this.viewer = this.$store.state.viewer;
      if (this.bookmark_name == "") {
        MessageBox.alert('请输入名称', '提示', {
          confirmButtonText: '确认',
        })
        return
      }
      if (this.hasName(this.bookmark_name)) {
        Message.error("名称已存在！")
        return;
      }
      var bookmark = zz3d.point.getCameraView(this.viewer, true);
      var loading = Loading.service({
        lock: true,
        text: '请等待，正在截屏！',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.viewer.zz.expImage({
        download: false,
        width: 300, //指定 高  或 宽
        calback: (base64) => {//回调
          let temp = {
            name: this.bookmark_name,
            data: JSON.stringify(bookmark),
            icon: base64,
            id: new Date().getTime()
          }
          this.tableData.push(temp);
          let lastcookie = JSON.stringify(this.tableData);
          LocalStorageUser.add(this.cookieName, lastcookie);
          loading.close();
          Message.success("添加成功！");
        }
      });
    },
    handleCurrentChange(val) {
      // 处理表格行双击事件的逻辑
      if (val) {
        let bounds = val.data;
        if (typeof bounds === "string") {
          bounds = JSON.parse(val.data);
        }
        this.viewer.zz.centerAt(bounds, { isWgs84: true });
      }
    },
    delClick(id) {
      // 处理删除按钮点击的逻辑
      MessageBox.confirm(
        '确定要删除吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }
      )
        .then(() => {
          for (var index = this.tableData.length - 1; index >= 0; index--) {
            if (this.tableData[index].id == id) {
              this.tableData.splice(index, 1);
              var lastcookie = JSON.stringify(this.tableData);
              LocalStorageUser.add(this.cookieName, lastcookie);
              break;
            }
          } Message({
            type: 'success',
            message: '删除成功',
          })

        })
        .catch(() => {
          Message({
            type: 'info',
            message: "删除失败",
          })
        })
    },
    getbookmark() {
      // 获取视角数据的逻辑
      let atcookie = LocalStorageUser.get(this.cookieName); //读取localStorage值
      if (atcookie != null)
        this.tableData = eval(atcookie);
      else this.tableData.length = 0
    },
    hasName(name) {
      let has = false;
      for (var index = this.tableData.length - 1; index >= 0; index--) {
        if (this.tableData[index].name == name) {
          has = true;
          break;
        }
      }
      return has;
    },
    callbackclose(){
      this.$emit('close') 
    },
  }
}
</script>

<style scoped>
.settings {
  position: absolute;
  top: 100px;
  right: 200px;
  width: 220px;
  height: 720px;
}

.demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>